<template>
	<view>
		<view class="search_top">
			<u-search placeholder="搜索" v-model="search" shape="square" :show-action="true" input-align="center" :action-style="ybtn"
			 @search="btnSearch" @custom="btnSearch"></u-search>
		</view>
		<u-sticky>
			<HMfilterDropdown :filterData="filterData" :defaultSelected="filterDropdownValue" @confirm="confirm"></HMfilterDropdown>
		</u-sticky>
		<view class="classify_body">
			<block v-for="(item, index) in List" :key="index">
				<navigator :url="`../course/c_details?id=${item.courseId}`">
					<teachList :items="item"></teachList>
				</navigator>
			</block>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import teachList from '@/components/teachList.vue';
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	export default {
		components: {
			teachList,
			HMfilterDropdown
		},
		data() {
			return {
				search: '',
				status: 'loadmore',
				pageIndex: 1,
				ybtn: {
					'margin-left': '30rpx',
					'margin-right': '20rpx',
					color: '#8C84F3'
				},
				indexArr: '',
				valueArr: '',
				List: [

				],
				filterData: [{
						name: '综合排序',
						type: 'hierarchy',
						submenu: [{
								name: '综合排序',
								value: ''
							},
							{
								name: '人气最高',
								value: 'renqi'
							},
							{
								name: '价格最高',
								value: 'jiage'
							},
						]
					},
					{
						name: '课程分类',
						type: 'hierarchy',
						submenu: [
							{
								name:'课程分类',
								value:''
							}
						]
					},
					{
						name: '价格筛选',
						type: 'radio',
						submenu: [{
							name: '',
							submenu: [{
									name: '免费',
									value: 'f0'
								},
								{
									name: '50以下',
									value: 'f50'
								},
								{
									name: '50-100',
									value: 'f100'
								},
								{
									name: '100-500',
									value: ' f500'
								}
							]
						}]
					}
				],
				filterDropdownValue: [],
			};
		},
		onLoad() {
			const _this = this
			this.getList();
			this.$u.api.getlevelOne().then(res => {
				for (let i in res.data.data) {
					let data = {
						value: res.data.data[i].levelId,
						name: res.data.data[i].levelValue
					};
					this.filterData[1].submenu.push(data)
				}
			})
		},
		// 加载更多
		onReachBottom() {
			this.status = 'loading';

		},
		methods: {
			confirm(e) {
				let dv = '';
				let dva = '';
				if(e.value[2][0][0] === 'f0'){
					dv = e.value[2][0][0]
				}else{
					dva = e.value[2][0][0]
				}
				let data = {
					s_courseName: this.search,
					flid: e.value[1][0],
					order:e.value[0][0],
					maxprice:dva,
					minprice:dv
				}
				this.$u.api.getsearchName(data).then(res => {
					this.List = res.data.data;
				});
				return;
			},
			// 搜索
			btnSearch() {
				let data = {
					s_courseName: this.search
				};
				this.$u.api.getsearchName(data).then(res => {
					this.List = res.data.data;
				});
			},

			// 获取内容
			getList() {
				let data = {
					currentPage: this.pageIndex,
					pageSize: 10
				}
				this.$u.api.getAllCourses(data).then(res => {
					this.List = res.data.data.list;
					if (res.list) {
						this.pageIndex++;
						this.status = 'loadmore'
					} else {
						this.status = 'nomore'
					}
				})
			},
		}
	};
</script>

<style lang="scss">
	.search_top {
		margin-top: 20rpx;
		padding-left: 20rpx;
	}

	.classify_body {
		padding: 20rpx;
	}

	.screen_body {
		display: flex;
		height: 90rpx;
		background: #fff;

		>view {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;

			&::after {
				content: '';
				width: 0;
				height: 0;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 7px solid #8c84f3;
				margin-left: 10px;
			}
		}
	}
</style>
